<script setup>
/**
 * 通知详情页面
 *
 * 功能：
 * 1. 显示通知的完整内容
 * 2. 自动标记为已读
 * 3. 支持下载附件
 */
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { ArrowLeft, Download, Bell } from '@element-plus/icons-vue';
// import AppSidebar from '@/components/common/AppSidebar.vue';
import { fetchNoticeDetail } from '@/api/notice';

// 路由相关
const route = useRoute(); // 获取当前路由信息（包含 query 参数）
const router = useRouter(); // 用于导航

// 从 localStorage 获取登录用户信息
const getEnterpriseInfo = () => {
    try {
        const enterpriseInfoStr = localStorage.getItem('enterpriseInfo');
        if (enterpriseInfoStr) {
            return JSON.parse(enterpriseInfoStr);
        }
    } catch (error) {
        console.error('获取企业信息失败:', error);
    }
    return null;
};

const enterpriseInfo = getEnterpriseInfo();

// 响应式数据
const loading = ref(false);
const notice = ref(null);

// 从登录信息获取
const username = ref(localStorage.getItem('username') || 'test_user'); // 从 localStorage 单独读取
const enterpriseId = ref(enterpriseInfo?.enterpriseId || 'ENTERPRISE_001');

/**
 * 加载通知详情
 *
 * 流程：
 * 1. 从 URL 参数中获取通知 ID
 * 2. 调用 API 获取详情
 * 3. 后端会自动标记为已读
 */
const loadNoticeDetail = async () => {
    // 从 URL 获取通知 ID
    const noticeId = route.params.id || route.query.id;

    if (!noticeId) {
        ElMessage.error('缺少通知ID');
        router.back(); // 返回上一页
        return;
    }

    loading.value = true;

    try {
        const data = await fetchNoticeDetail(noticeId, {
            username: username.value,
            enterprise_id: enterpriseId.value,
        });

        notice.value = data;
    } catch (error) {
        ElMessage.error(error?.message || '加载通知详情失败');
        // 3秒后返回列表页
        setTimeout(() => router.push('/notice/list'), 3000);
    } finally {
        loading.value = false;
    }
};

/**
 * 返回列表页
 */
const handleBack = () => {
    router.push('/notice/list');
};

/**
 * 下载附件
 *
 * 为什么要单独写个函数？
 * - 可以添加下载前的权限检查
 * - 可以统计下载次数
 * - 可以处理下载错误
 */
const handleDownload = () => {
    if (notice.value?.attachment) {
        // 创建一个隐藏的 a 标签来触发下载
        const link = document.createElement('a');
        link.href = notice.value.attachment;
        link.download = notice.value.attachmentName || '附件';
        link.click();
    }
};

/**
 * 格式化日期
 */
const formatDate = (dateStr) => {
    if (!dateStr) return '-';
    const date = new Date(dateStr);
    return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
    });
};

// 页面加载时获取数据
onMounted(() => {
    loadNoticeDetail();
});
</script>

<template>
    <div class="notice-detail">
        <!-- 左侧导航 -->
        <!-- <AppSidebar /> -->

        <!-- 右侧主内容 -->
        <el-main class="main-content">
            <!-- 返回按钮 -->
            <el-button :icon="ArrowLeft" @click="handleBack" class="back-button">
                返回列表
            </el-button>

            <!-- 详情卡片 -->
            <el-card v-loading="loading" class="detail-card">
                <template v-if="notice">
                    <!-- 头部信息 -->
                    <div class="detail-header">
                        <!-- 重要标签 -->
                        <el-tag
                            v-if="notice.isImportant === 1"
                            type="danger"
                            size="large"
                            effect="dark"
                            class="important-tag"
                        >
                            <el-icon>
                                <Bell />
                            </el-icon>
                            重要通知
                        </el-tag>

                        <!-- 标题 -->
                        <h1 class="detail-title">{{ notice.title }}</h1>

                        <!-- 元信息 -->
                        <div class="detail-meta">
                            <span class="meta-item"> 发布人：{{ notice.publisher }} </span>
                            <span class="meta-item">
                                发布时间：{{ formatDate(notice.publishTime) }}
                            </span>
                            <span class="meta-item"> 阅读次数：{{ notice.readCount || 0 }} </span>
                        </div>
                    </div>

                    <!-- 分隔线 -->
                    <el-divider />

                    <!-- 通知内容 -->
                    <div class="detail-content">
                        <!-- 
              v-html 可以渲染 HTML 内容
              为什么要用 v-html？
              - 通知内容可能包含格式（加粗、换行、链接等）
              - v-html 可以保留这些格式
              
              注意：只能用于可信内容，防止 XSS 攻击
            -->
                        <div v-html="notice.content"></div>
                    </div>

                    <!-- 附件下载 -->
                    <div v-if="notice.attachment" class="detail-attachment">
                        <el-divider />
                        <div class="attachment-section">
                            <span class="attachment-label">附件：</span>
                            <el-button type="primary" :icon="Download" @click="handleDownload">
                                下载 {{ notice.attachmentName }}
                            </el-button>
                        </div>
                    </div>
                </template>
            </el-card>
        </el-main>
    </div>
</template>

<style scoped lang="scss">
.notice-detail {
    display: flex;
    min-height: 100vh;
    background: #f8fafc;
}

.main-content {
    flex: 1;
    padding: 32px;
}

.back-button {
    margin-bottom: 16px;
    border-radius: 12px;
}

.detail-card {
    max-width: 900px;
    margin: 0 auto;
    border-radius: 12px;
}

.detail-header {
    text-align: center;
    padding: 24px 0;
}

.important-tag {
    margin-bottom: 16px;
    font-size: 14px;
    padding: 8px 16px;
}

.detail-title {
    margin: 16px 0;
    font-size: 32px;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.4;
}

.detail-meta {
    display: flex;
    justify-content: center;
    gap: 32px;
    font-size: 14px;
    color: #6b7280;
    margin-top: 16px;
}

.detail-content {
    padding: 32px 0;
    font-size: 16px;
    line-height: 1.8;
    color: #374151;

    /* 内容样式优化 */
    :deep(p) {
        margin: 16px 0;
    }

    :deep(img) {
        max-width: 100%;
        height: auto;
        border-radius: 8px;
        margin: 16px 0;
    }

    :deep(a) {
        color: #667eea;
        text-decoration: none;

        &:hover {
            text-decoration: underline;
        }
    }
}

.attachment-section {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 0;

    .attachment-label {
        font-size: 15px;
        font-weight: 600;
        color: #374151;
    }
}
</style>
